/*
	COLORES QUE COMBINA SEGUN EL COLOR ROJO DEL LOGO DE LA UNA
	ROJO-UNA: #d12524

	AZUL1: #105684
	AZUL2: #0B649E
	AMARILLO: #D9D73B
	ROJO: #840A0A
*/
@charset "utf-8";
@font-face{
	font-family: 'BalsamiqSansRegular';
	src: url(FONTS/BalsamiqSansRegular.ttf) format('truetype');
	font-size: 16px;
	font-weight: normal;
	font-style: normal;
}

body{
	margin: 0px;
	padding: 0px;
	font-family: 'BalsamiqSansRegular'!important;
	height: 100%!important;
	width: 100%!important;
}

/*==========TITULO==============*/
.clLogin h2{
	margin: 5px;
	color: #840A0A;
}

/*============BORDE REDONDO DE LOS INPUT==========*/
#frmLogin input{
	border-radius: 80px 80px 80px 80px;
	-moz-border-radius: 80px 80px 80px 80px;
	-webkit-border-radius: 80px 80px 80px 80px;
	border: 1px solid #bbbbbb;

	margin: 5px;
	padding-left:20px; 
	padding-right:5px; 
	width: 250px;
	height: 30px;
	font-size: 14px;
	font-family: 'BalsamiqSansRegular'!important;
}

/*===============SOMBRA AMARILLA DE LOS INPUT==========*/
#frmLogin input:focus{
	-webkit-box-shadow: 0px 0px 30px 0px rgba(217,215,59,1);
	-moz-box-shadow: 0px 0px 30px 0px rgba(217,215,59,1);
	box-shadow: 0px 0px 30px 0px rgba(217,215,59,1);
}

/*===============ESCRITORIO============*/
@media only screen and (min-height :600px){
	.clTitulo{
		width: 100%;
		background-color: #105684;
	}

	.clTitulo p{
		text-align: center;
		margin: 0px;
		padding: 5px;
	}

	.clLogin{
		margin-top: 10%;
		text-align: center;
		font-family: 'BalsamiqSansRegular'!important;
	}

	footer{
		background-color: #105684;
		color: #ffffff;
		text-align: center;

		position: absolute;
		bottom: 0px;
		width: 100%;
		font-family: 'BalsamiqSansRegular'!important;
	}
}

/*===============MOBILES============*/
@media only screen and (max-height: 601px){
	.wrapper{
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
	}

	.clTitulo{
		width: 100%;
		background-color: #105684;
		height: 15%!important;
	}

	.clTitulo p{
		text-align: center;
		margin: 0px;
		padding: 5px;
	}

	.clLogin{
		margin-top: 5%;
		text-align: center;
		font-family: 'BalsamiqSansRegular'!important;
		height: 60%!important;
	}

	footer{
		background-color: #105684;
		color: #ffffff;
		text-align: center;

		height: 20%!important;
		position: relative;
		bottom: 0px;
		width: 100%;
		font-family: 'BalsamiqSansRegular'!important;
	}
}

/*=============BOTON=======================*/
.clBoton {
	padding-left:5px!important; 
	padding-right:5px!important; 
	margin: 0px!important;

	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d12424), color-stop(1, #840a0a) );
	background:-moz-linear-gradient( center top, #d12424 5%, #840a0a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d12424', endColorstr='#840a0a');
	background-color:#d12424;
	-webkit-border-top-left-radius:80px;
	-moz-border-radius-topleft:80px;
	border-top-left-radius:80px;
	-webkit-border-top-right-radius:80px;
	-moz-border-radius-topright:80px;
	border-top-right-radius:80px;
	-webkit-border-bottom-right-radius:80px;
	-moz-border-radius-bottomright:80px;
	border-bottom-right-radius:80px;
	-webkit-border-bottom-left-radius:80px;
	-moz-border-radius-bottomleft:80px;
	border-bottom-left-radius:80px;
	border:1px solid #840a0a;
	display:inline-block;
	color:#ffffff;
	font-family: 'BalsamiqSansRegular'!important;
	font-size:18px!important;
	font-style:italic;
	height:50px!important;
	line-height:49px;
	width:250px!important;
	text-decoration:none;
	text-align:center;
}

.clBoton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #840a0a), color-stop(1, #d12424) );
	background:-moz-linear-gradient( center top, #840a0a 5%, #d12424 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#840a0a', endColorstr='#d12424');
	background-color:#840a0a;
}

.clBoton:active {
	position:relative;
	top:1px;
}

/*============ANIMACION=================*/
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1; 
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:0.5s;
    -moz-animation-duration:0.5s;
    animation-duration:0.5s;

    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.splash {
	background-color: #105684;
	background-size: cover;
	background-attachment: fixed;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	min-height: 360px;
	z-index: 999;
	text-align: center;
}

.splash img{
	margin: 0px;
	width: 80%;
	height: 80%;
}

.splash-title {
    color: white;
    font-size: 3em;
    margin-top: 0px;
    text-shadow: 0 2px 10px #000;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

a.splash-arrow {
	background-color: #aabbcc;
    color: white;
    font-size: 1.2em;
    position: absolute;
    bottom: 55px;
    left: 50%;
    margin-left: -25px;
    width: 50px;
    height: 50px;
    font-weight: bold;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    animation-delay: 1.5s;
    border: 3px solid white;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

a.splash-arrow:hover {
    text-decoration: none;
    bottom: 50px;
}

@media all and (max-width: 690px) {
    header h1 { width: 100%; text-align: center; }
    header nav { float: none; display: inline-block; margin: 0 auto; }
      .splash-title {font-size: 2em;}
}

@media all and (max-width: 480px) {
    .splash-title {font-size: 1.5em;}
}